<template>
    <div>
        <el-card shadow="never">
            <div class="text-lg pl-7 mb-5 font-bold dark:text-gray-400">
                    博客设置
            </div>
            <el-form ref="formRef" :model="form" label-width="180px" :rules="rules">
                <el-form-item>
                    <h2 class="font-bold text-base mb-1">基础设置</h2>
                </el-form-item>
                <el-form-item label="博客名称" prop="name">
                    <el-input v-model="form.name" clearable />
                </el-form-item>
                <el-form-item label="作者名" prop="author">
                    <el-input v-model="form.author" clearable />
                </el-form-item>
                <el-form-item label="介绍语" prop="introduction">
                    <el-input v-model="form.introduction" type="textarea" />
                </el-form-item>
                <el-form-item label="博客 LOGO" prop="logo">
                    <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        :show-file-list="false" :on-change="handleLogoChange">
                        <img v-if="form.logo" :src="form.logo" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="Mini 博客 LOGO" prop="miniLogo">
                    <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        :show-file-list="false" :on-change="handleMiniLogoChange">
                        <img v-if="form.miniLogo" :src="form.miniLogo" class="miniLogo" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="作者头像" prop="avatar">
                    <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        :show-file-list="false" :on-change="handleAvatarChange">
                        <img v-if="form.avatar" :src="form.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>

                <!-- 分割线 -->
                <el-divider />
                
                <el-form-item>
                    <h2 class="font-bold text-base mb-1">第三方平台设置</h2>
                </el-form-item>
                <!-- 开启 Github 访问 -->
                <el-form-item label="开启 GihHub 访问">
                    <el-switch v-model="isGithubChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="githubSwitchChange" />
                </el-form-item>
                <el-form-item label="GitHub 主页访问地址" v-if="isGithubChecked">
                    <el-input v-model="form.githubHome" clearable placeholder="请输入 GitHub 主页访问的 URL" />
                </el-form-item>

                <!-- 开启 Gitee 访问 -->
                <el-form-item label="开启 Gitee 访问">
                    <el-switch v-model="isGiteeChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="giteeSwitchChange" />
                </el-form-item>
                <el-form-item label="Gitee 主页访问地址" v-if="isGiteeChecked">
                    <el-input v-model="form.giteeHome" clearable placeholder="请输入 Gitee 主页访问的 URL" />
                </el-form-item>

                <!-- 开启知乎访问 -->
                <el-form-item label="开启知乎访问">
                    <el-switch v-model="isZhihuChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="zhihuSwitchChange" />
                </el-form-item>
                <el-form-item label="知乎主页访问地址" v-if="isZhihuChecked">
                    <el-input v-model="form.zhihuHome" clearable placeholder="请输入知乎主页访问的 URL" />
                </el-form-item>

                <!-- 开启 CSDN 访问 -->
                <el-form-item label="开启 CSDN 访问">
                    <el-switch v-model="isCSDNChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="csdnSwitchChange" />
                </el-form-item>
                <el-form-item label="CSDN 主页访问地址" v-if="isCSDNChecked">
                    <el-input v-model="form.csdnHome" clearable placeholder="请输入 CSDN 主页访问的 URL" />
                </el-form-item>

                <!-- 开启 稀土掘金 访问 -->
                <el-form-item label="开启 稀土掘金 访问">
                    <el-switch v-model="isJueJinChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="jueJinSwitchChange" />
                </el-form-item>
                <el-form-item label="稀土掘金 主页访问地址" v-if="isJueJinChecked">
                    <el-input v-model="form.juejinHome" clearable placeholder="请输入 稀土掘金 主页访问的 URL" />
                </el-form-item>

                <!-- 开启 华为云博客 访问 -->
                <el-form-item label="开启 华为云博客 访问">
                    <el-switch v-model="isHuaWeiChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="huaWeiSwitchChange" />
                </el-form-item>
                <el-form-item label="华为云博客 主页访问地址" v-if="isHuaWeiChecked">
                    <el-input v-model="form.huaweiHome" clearable placeholder="请输入 华为云博客 主页访问的 URL" />
                </el-form-item>

                <!-- 开启 腾讯云 访问 -->
                <el-form-item label="开启 腾讯云博客 访问">
                    <el-switch v-model="isTencentChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="tencentSwitchChange" />
                </el-form-item>
                <el-form-item label="腾讯云博客 主页访问地址" v-if="isTencentChecked">
                    <el-input v-model="form.tencentHome" clearable placeholder="请输入 腾讯云博客 主页访问的 URL" />
                </el-form-item>
                <!-- 分割线 -->
                <el-divider />
                
                <el-form-item>
                    <h2 class="font-bold text-base mb-1">评论设置</h2>
                </el-form-item>
                <el-form-item label="敏感词过滤">
                    <el-switch v-model="form.isCommentSensiWordOpen" inline-prompt :active-icon="Check" :inactive-icon="Close"
                    @change="sensiWordSwitchChange"     />
                    <div class="flex items-center ml-3">
                        <el-icon class="mr-2" color="#909399"><InfoFilled /></el-icon>
                        <el-text class="mx-1" type="info"  size="small">开启后，系统自动对发表的每条评论进行敏感词过滤</el-text>
                    </div>
                </el-form-item>
                <el-form-item label="开启审核">
                    <el-switch v-model="form.isCommentExamineOpen" inline-prompt :active-icon="Check" :inactive-icon="Close"
                    @change="examineSwitchChange"     />
                    <div class="flex items-center ml-3">
                        <el-icon class="mr-2" color="#909399"><InfoFilled /></el-icon>
                        <el-text class="mx-1" type="info"  size="small">开启后，评论需要博主后台审核通过后，才会展示出来</el-text>
                    </div>
                </el-form-item>
                <el-form-item label="博主邮箱">
                    <el-input v-model="form.mail" clearable placeholder="请输入博主邮箱地址" />
                    <div class="flex items-center">
                        <el-icon class="mr-2" color="#909399"><InfoFilled /></el-icon>
                        <el-text class="mx-1" type="info"  size="small">当被评论后，用于主动发送邮件通知博主</el-text>
                    </div>
                </el-form-item>
                <!-- 分割线 -->
                <el-divider />
                
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" :loading="btnLoading">保存设置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { getBlogSettingsDetail, updateBlogSettings } from '@/api/admin/blogsettings';
import { uploadFile } from '@/api/admin/file';
import { showMessage } from '@/composables/utils';
import { requiredNumber } from 'element-plus/es/components/table-v2/src/common';
import { ref, reactive } from 'vue';

//表单对象
const form = reactive({
    name: '',
    author: '',
    logo: '',
    miniLogo: '',
    avatar: '',
    introduction: '',
    githubHome: '',
    giteeHome: '',
    zhihuHome: '',
    csdnHome: '',
    huaweiHome: '',
    tencentHome: '',
    juejinHome: '',
    isCommentSensiWordOpen: true, // 是否开启评论敏感词过滤
    isCommentExamineOpen: false, // 是否开启评论审核
    mail: '' // 博主邮箱
})

const rules = {
    name: [{
        required: true,
        message: '请输入博客名称',
        trigger: 'blur'
    }],
    author: [{
        required: true,
        message: '请输入作者',
        trigger: 'blur'
    }],
    logo: [{
        required: true,
        message: '请上传博客logo',
        trigger: 'blur'
    }],
    miniLogo: [{
        required: true,
        message: '请上传min博客logo',
        trigger: 'blur'
    }],
    avatar: [{
        required: true,
        message: '请上传作者头像',
        trigger: 'blur'
    }]
}

// 是否开启 GitHub
const isGithubChecked = ref(false)
// 是否开启 Gitee
const isGiteeChecked = ref(false)
// 是否开启知乎
const isZhihuChecked = ref(false)
// 是否开启 CSDN
const isCSDNChecked = ref(false)
const isJueJinChecked = ref(false)
const isHuaWeiChecked = ref(false)
const isTencentChecked = ref(false)

// 省略...

// 监听 Github Switch 改变事件
const githubSwitchChange = (checked) => {
    if (checked == false) {
        form.githubHome = ''
    }
}

// 监听 Gitee Switch 改变事件
const giteeSwitchChange = (checked) => {
    if (checked == false) {
        form.giteeHome = ''
    }
}

// 监听知乎 Switch 改变事件
const zhihuSwitchChange = (checked) => {
    if (checked == false) {
        form.zhihuHome = ''
    }
}

// 监听 CSDN Switch 改变事件
const csdnSwitchChange = (checked) => {
    if (checked == false) {
        form.csdnHome = ''
    }
}

const jueJinSwitchChange = (checked) => {
    if (checked == false) {
        form.juejinHome = ''
    }
}

const huaWeiSwitchChange = (checked) => {
    if (checked == false) {
        form.huaweiHome = ''
    }
}

const tencentSwitchChange = (checked) => {
    if (checked == false) {
        form.tencentHome = ''
    }
}

//初始化博客信息
const initBlogSettings = () => {
    //请求后台接口
    getBlogSettingsDetail().then((res) => {
        if (res.success == true) {
            //设置表单数据
            form.name = res.data.blogName
            form.author = res.data.author
            form.avatar = res.data.avatar
            form.logo = res.data.logo
            form.miniLogo = res.data.miniLogo
            form.introduction = res.data.introduction
            form.isCommentSensiWordOpen = res.data.isCommentSensiWordOpen
            form.isCommentExamineOpen = res.data.isCommentExamineOpen
            form.mail = res.data.mail
            //判断链接是否为空，不为空则渲染按钮并填充信息
            if (res.data.giteeHome) {
                isGiteeChecked.value = true
                form.giteeHome = res.data.giteeHome
            }

            if (res.data.githubHome) {
                isGithubChecked.value = true
                form.githubHome = res.data.githubHome
            }

            if (res.data.zhihuHome) {
                isZhihuChecked.value = true
                form.zhihuHome = res.data.zhihuHome
            }

            if (res.data.csdnHome) {
                isCSDNChecked.value = true
                form.csdnHome = res.data.csdnHome
            }

            if (res.data.juejinHome) {
                isJueJinChecked.value = true
                form.juejinHome = res.data.juejinHome
            }

            if (res.data.huaweiHome) {
                isHuaWeiChecked.value = true
                form.huaweiHome = res.data.huaweiHome
            }

            if (res.data.tencentHome) {
                isTencentChecked.value = true
                form.tencentHome = res.data.tencentHome
            }
        }

       
    })
}

//初始化
initBlogSettings()

//上传logo图片
const handleLogoChange = (file) => {
    let formData = new FormData()
    //添加file字段
    formData.append('file', file.raw)
    uploadFile(formData).then((res) => {
        if (res.success == true) {
            form.logo = res.data.url
            showMessage("上传博客Logo成功！")
        } else if(res.success == false) {
            let message = res.message
            showMessage(message, 'error')
        }
    })
}

const handleMiniLogoChange =  (file) => {
    let formData = new FormData()
    //添加file字段
    formData.append('file', file.raw)
    uploadFile(formData).then((res) => {
        if (res.success == true) {
            form.miniLogo = res.data.url
            showMessage("上传博客 Mini Logo成功！")
        } else if(res.success == false) {
            let message = res.message
            showMessage(message, 'error')
        }
    })
}

const handleAvatarChange = (file) => {
    let formData = new FormData()
    //添加file字段
    formData.append('file', file.raw)
    uploadFile(formData).then((res) => {
        if (res.success == true) {
            form.avatar = res.data.url
            showMessage("上传个人头像成功！")
        } else if(res.success == false) {
            let message = res.message
            showMessage(message, 'error')
        }
    })
}

const btnLoading = ref(false)
const formRef = ref(null)


//更新数据
const onSubmit = () => {
    //验证form表单字段
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log("表单验证失败")
            return false
        }

        //显示按钮
        btnLoading.value = true
        updateBlogSettings(form).then((res) => {
            if (res.success == true) {
                //重新渲染画面
                initBlogSettings()
                showMessage("数据保存成功！")
            } else {
                let message = res.message
                showMessage(message, 'error')
            }
        }).finally(() => {
            //关闭加载动画
            btnLoading.value = false
        })
    })
}
// 评论敏感词过滤 switch 组件 change 事件
const sensiWordSwitchChange = (checked) => form.isCommentSensiWordOpen = checked
// 评论审核 switch 组件 change 事件
const examineSwitchChange = (checked) => form.isCommentExamineOpen = checked
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>


<style>
/* 解决 textarea :focus 状态下，边框消失的问题 */
.el-textarea__inner:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
